<template>
  <div id="app">
    <header>
      <input
        type="text"
        placeholder="Enter an activity.."
        v-model="newItem"
        @keyup.enter="addItem"
        id="item"
      />
      <button @click="addItem" id="add">
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          viewBox="0 0 22 22"
          style="enable-background: new 0 0 22 22"
          xml:space="preserve"
        >
          <g>
            <path
              class="fill"
              d="M6 12l3 3L18 7"
              stroke="#25b99a"
              stroke-width="3"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </g>
        </svg>
      </button>
    </header>

    <!-- 调 n 的小滑块 -->
    <div style="padding: 0 15px 10px">
      <label style="color: #fff; font-size: 14px">
        n =
        <input
          type="range"
          min="1"
          max="9999"
          v-model.number="n"
          style="vertical-align: middle; margin: 0 6px"
        />
        <!-- 数字输入框，可手动输入更大值 -->
        <input
          type="number"
          min="1"
          max="999999"
          v-model.number="n"
          style="width: 70px; margin-left: 6px"
        />
      </label>
    </div>

    <div class="container">
      <!-- 未完成的任务 -->
      <ul class="todo" id="todo">
        <!-- 第一条：奇数和特殊任务 -->
        <li class="task-item">
          <div class="task-content">
            <span>1 到 {{ n }} 的奇数和 = {{ oddSum }}</span>
          </div>
          <div class="buttons">
            <button class="complete" disabled style="opacity: 0.4">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 22 22"
                style="enable-background: new 0 0 22 22"
                xml:space="preserve"
              >
                <g>
                  <path
                    class="fill"
                    d="M6 12l3 3L18 7"
                    stroke="#25b99a"
                    stroke-width="3"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </g>
              </svg>
            </button>
            <button class="remove" disabled style="opacity: 0.4">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 22 22"
                style="enable-background: new 0 0 22 22"
                xml:space="preserve"
              >
                <rect class="noFill" width="22" height="22" />
                <g>
                  <g>
                    <path
                      class="fill"
                      d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"
                    />
                  </g>
                </g>
              </svg>
            </button>
          </div>
        </li>

        <!-- 普通未完成任务 -->
        <li v-for="task in uncompletedTasks" :key="task.id" class="task-item">
          <div class="task-content">
            <span>{{ task.text }}</span>
            <div class="task-time">添加时间: {{ formatTime(task.createdAt) }}</div>
          </div>
          <div class="buttons">
            <button @click="completeTask(task.id)" class="complete">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 22 22"
                style="enable-background: new 0 0 22 22"
                xml:space="preserve"
              >
                <g>
                  <path
                    class="fill"
                    d="M6 12l3 3L18 7"
                    stroke="#25b99a"
                    stroke-width="3"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </g>
              </svg>
            </button>
            <button @click="deleteTask(task.id)" class="remove">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 22 22"
                style="enable-background: new 0 0 22 22"
                xml:space="preserve"
              >
                <rect class="noFill" width="22" height="22" />
                <g>
                  <g>
                    <path
                      class="fill"
                      d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"
                    />
                  </g>
                </g>
              </svg>
            </button>
          </div>
        </li>
      </ul>

      <!-- 已完成的任务 -->
      <ul class="todo" id="completed">
        <li v-for="task in completedTasks" :key="task.id" class="task-item">
          <div class="buttons">
            <button @click="uncompleteTask(task.id)" class="complete">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 22 22"
                style="enable-background: new 0 0 22 22"
                xml:space="preserve"
              >
                <g>
                  <path
                    class="fill"
                    d="M6 12l3 3L18 7"
                    stroke="#25b99a"
                    stroke-width="3"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </g>
              </svg>
            </button>
            <button @click="deleteTask(task.id)" class="remove">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 22 22"
                style="enable-background: new 0 0 22 22"
                xml:space="preserve"
              >
                <rect class="noFill" width="22" height="22" />
                <g>
                  <g>
                    <path
                      class="fill"
                      d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"
                    />
                  </g>
                </g>
              </svg>
            </button>
          </div>
          <div class="task-content">
            <span>{{ task.text }}</span>
            <div class="task-time">添加时间: {{ formatTime(task.createdAt) }}</div>
            <div v-if="task.completedAt" class="task-time">完成时间: {{ formatTime(task.completedAt) }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { sumOdd } from '@/utils/math'

interface Task {
  id: number
  text: string
  completed: boolean
  createdAt: number // 添加时间戳
  completedAt?: number // 完成时间戳（可选）
}

export default defineComponent({
  name: 'App',
  data() {
    return {
      newItem: '',
      tasks: [] as Task[],
      n: 10, // 控制奇数范围
    }
  },
  computed: {
    oddSum() {
      return sumOdd(this.n)
    },
    uncompletedTasks(): Task[] {
      return this.tasks.filter((task) => !task.completed)
    },
    completedTasks(): Task[] {
      return this.tasks.filter((task) => task.completed)
    },
  },
  methods: {
    // 格式化时间显示
    formatTime(timestamp: number): string {
      const date = new Date(timestamp)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
    },
    
    addItem() {
      if (this.newItem.trim() !== '') {
        this.tasks.push({
          id: Date.now(),
          text: this.newItem.trim(),
          completed: false,
          createdAt: Date.now() // 添加创建时间
        })
        this.newItem = ''
        this.saveToLocalStorage()
      }
    },
    deleteTask(id: number) {
      this.tasks = this.tasks.filter((task) => task.id !== id)
      this.saveToLocalStorage()
    },
    completeTask(id: number) {
      const task = this.tasks.find((task) => task.id === id)
      if (task) {
        task.completed = true
        task.completedAt = Date.now() // 记录完成时间
        this.saveToLocalStorage()
      }
    },
    uncompleteTask(id: number) {
      const task = this.tasks.find((task) => task.id === id)
      if (task) {
        task.completed = false
        task.completedAt = undefined // 清除完成时间
        this.saveToLocalStorage()
      }
    },
    saveToLocalStorage() {
      try {
        localStorage.setItem('todoList', JSON.stringify(this.tasks))
      } catch (e) {
        console.warn('Failed to save to localStorage', e)
      }
    },
    loadFromLocalStorage() {
      try {
        const saved = localStorage.getItem('todoList')
        if (saved) {
          this.tasks = JSON.parse(saved)
        }
      } catch (e) {
        console.warn('Failed to load from localStorage', e)
      }
    },
  },
  mounted() {
    this.loadFromLocalStorage()
  },
})
</script>

<style>
/* 你原来的样式全部保留，一字未动 */
@charset "UTF-8";
body {
  background: #edf0f1;
  padding: 80px 0 0 0;
}
body,
input,
button {
  font-family: 'Roboto', sans-serif;
}
.noFill {
  fill: none;
}
header {
  width: 100%;
  height: 80px;
  position: fixed;
  padding: 15px;
  top: 0;
  left: 0;
  z-index: 5;
  background: #25b99a;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
header input {
  width: 100%;
  height: 50px;
  float: left;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  text-indent: 18px;
  padding: 0 60px 0 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px 25px 25px 5px;
  border: 0px;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
header input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}
header button {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  border-radius: 25px;
  background: #fff;
  border: 0px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}
header button svg {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
}
header button svg .fill {
  fill: #25b99a;
}
.container {
  width: 100%;
  float: left;
  padding: 15px;
}
ul.todo {
  width: 100%;
  float: left;
}
ul.todo li {
  width: 100%;
  min-height: 50px;
  float: left;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  line-height: 22px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  box-shadow: 0px 1px 2px rgba(44, 62, 80, 0.1);
  margin: 0 0 10px 0;
  padding: 14px 100px 14px 14px;
  word-break: break-word;
}
ul.todo li:last-of-type {
  margin: 0;
}
ul.todo li .buttons {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}
ul.todo li .buttons button {
  width: 50px;
  height: 50px;
  float: left;
  background: none;
  position: relative;
  border: 0px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}
ul.todo li .buttons button:last-of-type:before {
  content: '';
  width: 1px;
  height: 30px;
  background: #edf0f1;
  position: absolute;
  top: 10px;
  left: 0;
}
ul.todo li .buttons button svg {
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -11px 0 0 -11px;
}
ul.todo li .buttons button.complete svg {
  border-radius: 11px;
  border: 1.5px solid #25b99a;
  transition: background 0.2s ease;
}
ul.todo#completed li .buttons button.complete svg {
  background: #25b99a;
  border: 0px;
}
ul.todo:not(#completed) li .buttons button.complete:hover svg {
  background: rgba(37, 185, 154, 0.75);
}
ul.todo:not(#completed) li .buttons button.complete:hover svg .fill {
  fill: #fff;
}
ul.todo#completed li .buttons button.complete svg .fill {
  fill: #fff;
}
ul.todo li .buttons button svg .fill {
  transition: fill 0.2s ease;
}
ul.todo li .buttons button.remove svg .fill {
  fill: #c0cecb;
}
ul.todo li .buttons button.remove:hover svg .fill {
  fill: #e85656;
}
ul.todo li .buttons button.complete svg .fill {
  fill: #25b99a;
}
ul.todo#completed {
  position: relative;
  padding: 60px 0 0 0;
}
ul.todo#completed:before {
  content: '';
  width: 150px;
  height: 1px;
  background: #d8e5e0;
  position: absolute;
  top: 30px;
  left: 50%;
  margin: 0 0 0 -75px;
}
ul.todo#todo:empty:after {
  content: 'You have nothing to-do!';
  margin: 15px 0 0 0;
}
ul.todo#completed:empty:after {
  content: 'You have yet to complete any tasks.';
}
ul.todo#todo:after,
ul.todo#completed:after {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 12px;
  color: #aaa;
}
</style>